body{
    background-color: #eee}
h1{  text-align: center}
.container{
    width: 960px;
    height: 450px;
    margin: 60px auto;
    position: relative
}
img{
    width: 299px;
    height: 171px;
    padding: 10px 10px 15px;
    background-color: #fff;border: 1px solid #ddd;
    position: absolute;
    -webkit-transition: 0.5s;
    -mozt-transition: 0.5s;
    transition: 0.5s;
}
img:hover{
    -webkit-transform: rotate(720deg) ;
    -moz-transform: rotate(720deg) ;
    transform: rotate(720deg) ;
    -webkit-transform: scale(2);
    -moz-transform:  scale(2);
    transform:  scale(2);
    box-shadow: 10px 10px 15px #ccc;
    z-index: 2;
}
.image1{
      top:0px;
  left:0px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);

}
.image2{
    top:0px;
  left:300px;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  transform: rotate(-20deg);

}
.image3{
      top:0px;
  left:500px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);

}
.image4{
    top:0px;
  left:700px;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  transform: rotate(20deg);
}
.image5{
    top:200px;
    left:0px;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);

}
.image6{
    top:200px;
    left:300px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);

}
.image7{
    top:200px;
    left:500px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);

}
.image8{
    top:200px;
    left:700px;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
}